<template>
	<view class="bg-white">
		<view class="padding solid-bottom text-lg flex" v-if="currentCity.code">
			<view class="flex-sub">
				当前城市：{{currentCity.name}}
			</view>
			<view class="flex-sub text-blue text-right padding-right-sm">
				<text @tap="selCur">选择</text>
			</view>
		</view>
		<view class="flex" style="height:calc(100vh - 50px)">
			<view class="flex-sub text-lg">
				<scroll-view scroll-y style="height:100%;" :scroll-into-view="toView">
					
					<view v-for="(item,index) in provinceList"
						 @tap="tapPro" :class="['padding-top padding-bottom',active==index?' bg-white ':'bg-gray']"
						:data-idx="index" :id="'cityPagePro'+index">
						<block v-if="active==index">
							<text class="cuIcon-titles text-blue"></text>
							{{item.name}}
						</block>
						<text v-else class="padding-left">{{item.name}}</text>
					</view>
				</scroll-view>
			</view>
			<view class="flex-treble text-lg">
				<scroll-view scroll-y style="height:100%;">
					<view v-for="(item,index) in cityList"   class="padding" :data-idx="index" @tap="selCity">
						<text :class="item.code == selectCode?'text-blue':''">{{item.name}}</text>
						<text v-if="item.code == selectCode" style="float:right"
							class="cuIcon-check text-blue text-bold"></text>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
import   { provinceCityList ,location   ,globalData} from  '../../../utils/util.js'
export default {
		data() {
			return {
				 active: 0,
				    provinceList: provinceCityList,
				    cityList: provinceCityList[0].children,
				    selectCode: null,
				    toView: '',
				    currentCity: {
				      name: '',
				      code: ''
				    }
			}
		},
		onLoad(options){
			console.log(provinceCityList)
			if (options.code) {
			      let proCode = options.code.substr(0, 2)
			      this.provinceList.forEach((item, index) => {
			        let val = (item.code + '').substr(0, 2)
			        if (val == proCode) {
			            this.active= index
			            this.cityList= provinceList[index].children
			            this.selectCode= options.code
			            this.toView= 'cityPagePro' + index
			             return
			        }
			      })
			    }
				// 获取位置
				let location =  location();
				if (location?.areaCode) {
					this.currentCity= {
					  name: location.attenCity,
					  code: location.areaCode
					}
				}
		},
		methods:{
			  tapPro(e) {
			    let idx = e.currentTarget.dataset.idx;
			    this.active= idx,
			    this.cityList= this.provinceList[idx].children
			  },
			  selCur(){
			     globalData.cityObj = this.currentCity
			     uni.navigateBack()
			  },
			  selCity(e) {
			    let idx = e.currentTarget.dataset.idx;
			    let cityObj =  this.provinceList[this.active].children[idx]
			    let cityVO = {
			      ...cityObj
			    }
			    if (cityVO.name != '全国') {
			      cityVO.name = cityVO.name.replace('全', '').replace('市', '')
			    }
			     globalData.cityObj = cityVO
				 this.selectCode= cityVO.code
			     uni.navigateBack()
			  }
		}
	}
</script>

<style>

</style>